<template>
  <div class="profile-container">
    <!-- 左侧个人信息 -->
    <div class="profile-sidebar">
      <div class="avatar-section">
        <div class="avatar-wrapper" @click="triggerUpload">
          <img :src="userInfo.avatar || '/default-avatar.png'" class="user-avatar">
          <div class="upload-hint">更换头像</div>
        </div>
        <input type="file" ref="fileInput" hidden accept="image/*" @change="handleAvatarChange">
        <h2 class="username">{{ userInfo.username }}</h2>
        <p class="user-bio">{{ userInfo.bio || '这个人很懒，还没有写简介...' }}</p>
      </div>

      <div class="user-stats">
        <div class="stat-item">
          <span class="stat-value">{{ statistics.posts }}</span>
          <span class="stat-label">文章</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ statistics.followers }}</span>
          <span class="stat-label">关注者</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ statistics.likes }}</span>
          <span class="stat-label">获赞</span>
        </div>
      </div>

      <div class="basic-info">
        <div class="info-item">
          <i class="icon">📧</i>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <i class="icon">📅</i>
          <span>{{ userInfo.registerDate }} 加入</span>
        </div>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="content-area">
      <!-- 标签页导航 -->
      <div class="tabs-nav">
        <div 
          v-for="tab in tabs" 
          :key="tab.key"
          :class="['tab-item', { active: currentTab === tab.key }]"
          @click="currentTab = tab.key"
        >
          <i class="tab-icon">{{ tab.icon }}</i>
          {{ tab.label }}
        </div>
      </div>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 文章管理 -->
        <div v-show="currentTab === 'posts'" class="section-card">
          <div class="section-header">
            <h3>文章管理</h3>
            <div class="header-actions">
              <div class="search-box">
                <input 
                  type="text" 
                  v-model="searchQuery" 
                  placeholder="搜索文章..."
                  @input="handleSearch"
                >
              </div>
              <select v-model="filterStatus" class="filter-select">
                <option value="all">全部文章</option>
                <option value="published">已发布</option>
                <option value="draft">草稿箱</option>
              </select>
              <button class="new-post-btn" @click="$router.push('/editor')">
                <i class="icon">✏️</i> 写文章
              </button>
            </div>
          </div>

          <!-- 文章列表 -->
          <div class="post-list">
            <div v-for="post in displayedPosts" :key="post.id" class="post-item">
              <div class="post-status" :class="post.status">
                {{ post.status === 'published' ? '已发布' : '草稿' }}
              </div>
              <div class="post-main">
                <h4 class="post-title" @click="viewPost(post.id)">{{ post.title }}</h4>
                <p class="post-excerpt">{{ post.excerpt }}</p>
                <div class="post-meta">
                  <span><i class="icon">📅</i>{{ post.date }}</span>
                  <span><i class="icon">👁️</i>{{ post.views }} 阅读</span>
                  <span><i class="icon">💬</i>{{ post.comments }} 评论</span>
                  <span><i class="icon">👍</i>{{ post.likes }} 赞</span>
                  <span class="category"><i class="icon">📂</i>{{ post.category }}</span>
                </div>
              </div>
              <div class="post-actions">
                <button @click="viewPost(post.id)" class="view">查看</button>
                <button @click="editPost(post.id)" class="edit">编辑</button>
                <button @click="deletePost(post.id)" class="delete">删除</button>
              </div>
            </div>
          </div>

          <!-- 分页器 -->
           
          <mj-pagination 
            :total="1" 
            :current="1"
            @change="changePage"
            />
        </div>

        <!-- 账号设置 -->
        <div v-show="currentTab === 'settings'" class="section-card">
          <h3>账号设置</h3>
          <div class="settings-form">
            <div class="form-group">
              <label>用户名</label>
              <input type="text" v-model="userInfo.username">
            </div>
            <div class="form-group">
              <label>个人简介</label>
              <textarea v-model="userInfo.bio" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input type="email" v-model="userInfo.email">
            </div>
            <button class="save-btn">保存更改</button>
          </div>
        </div>

        <!-- 安全中心 -->
        <div v-show="currentTab === 'security'" class="section-card">
          <h3>修改密码</h3>
          <div class="security-form settings-form">
            <div class="form-group">
              <div class="form-group">
                   <label>当前密码</label>
                   <input type="password" placeholder="当前密码" v-model="passwordForm.oldPassword">
              </div>
              <div class="form-group">
                   <label>新密码</label>
                   <input type="password" placeholder="新密码" v-model="passwordForm.newPassword">
              </div>
              <div class="form-group">
                   <label>确认新密码</label>
                   <input type="password" placeholder="确认新密码" v-model="passwordForm.confirmPassword">
              </div>
              <div class="error-message" v-if="passwordError">{{ passwordError }}</div>
              <button class="save-btn" @click="changePassword">确认修改</button>
            </div>
          </div>
        </div>

        <!-- 消息通知 -->
        <div v-show="currentTab === 'notifications'" class="section-card">
          <div class="notification-settings">
            <div class="setting-group">
              <h4>通知设置</h4>
              <div class="setting-item">
                <label class="switch-label">
                  <span>邮件通知</span>
                  <div class="switch">
                    <input type="checkbox" v-model="settings.emailNotification">
                    <span class="slider"></span>
                  </div>
                </label>
                <p class="setting-desc">接收重要的邮件通知</p>
              </div>
              <div class="setting-item">
                <label class="switch-label">
                  <span>评论通知</span>
                  <div class="switch">
                    <input type="checkbox" v-model="settings.commentNotification">
                    <span class="slider"></span>
                  </div>
                </label>
                <p class="setting-desc">有新评论时通知我</p>
              </div>
              <div class="setting-item">
                <label class="switch-label">
                  <span>点赞通知</span>
                  <div class="switch">
                    <input type="checkbox" v-model="settings.likeNotification">
                    <span class="slider"></span>
                  </div>
                </label>
                <p class="setting-desc">有新点赞时通知我</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfoApi } from '@/api/auth'
export default {
  name: 'Profile',
  data() {
    return {
      userInfo: {},
      editing: {
        username: false,
        email: false,
        bio: false
      },
      editForm: {
        username: '',
        email: '',
        bio: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordError: '',
      statistics: {
        posts: 42,
        drafts: 5,
        views: 1234,
        comments: 56,
        likes: 128,
        followers: 89
      },
      recentPosts: [
        {
          id: 1,
          title: '我的第一篇博客',
          excerpt: '这是我的第一篇博客，记录了我的学习心得...',
          date: '2024-03-21',
          views: 123,
          likes: 45,
          comments: 12
        },
        {
          id: 2,
          title: '如何提高写作效率',
          excerpt: '分享一些我在写作过程中总结的经验和技巧...',
          date: '2024-03-20',
          views: 89,
          likes: 34,
          comments: 8
        }
      ],
      settings: {
        emailNotification: true,
        commentNotification: true,
        likeNotification: true
      },
      searchQuery: '',
      filterStatus: 'all',
      currentPage: 1,
      pageSize: 5,
      monthlyStats: [30, 45, 25, 60, 35, 45, 40, 50, 35, 45, 30, 40], // 示例数据
      allPosts: [
        // 添加更多文章数据
        {
          id: 1,
          title: '我的第一篇博客',
          excerpt: '这是我的第一篇博客，记录了我的学习心得...',
          date: '2024-03-21',
          views: 123,
          likes: 45,
          comments: 12,
          status: 'published',
          category: '技术'
        },
        // ... 添加更多文章
      ],
      currentTab: 'posts',
      tabs: [
        { key: 'posts', label: '文章管理', icon: '📝' },
        { key: 'settings', label: '账号设置', icon: '⚙️' },
        { key: 'security', label: '安全中心', icon: '🔒' },
        { key: 'notifications', label: '消息通知', icon: '🔔' }
      ],
      loginDevices: [
        {
          id: 1,
          name: 'Chrome 浏览器',
          icon: '💻',
          location: '北京',
          lastLogin: '2024-03-21 14:30'
        },
        {
          id: 2,
          name: 'iPhone 13',
          icon: '📱',
          location: '上海',
          lastLogin: '2024-03-20 18:45'
        }
      ]
    }
  },
  mounted() {
    getUserInfoApi().then(res => {
      this.userInfo = res.data
    })
  },
  computed: {
    filteredPosts() {
      return this.allPosts.filter(post => {
        const matchesSearch = post.title.toLowerCase().includes(this.searchQuery.toLowerCase())
        const matchesFilter = this.filterStatus === 'all' || post.status === this.filterStatus
        return matchesSearch && matchesFilter
      })
    },
    totalPages() {
      return Math.ceil(this.filteredPosts.length / this.pageSize)
    },
    displayedPosts() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredPosts.slice(start, end)
    },
    displayedPages() {
      const pages = []
      for (let i = 1; i <= 20; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    triggerUpload() {
      this.$refs.fileInput.click()
    },
    handleAvatarChange(e) {
      const file = e.target.files[0]
      if (!file) return
      
      // 这里可以添加文件类型和大小检查
      if (!file.type.includes('image/')) {
        alert('请上传图片文件')
        return
      }
      
      const reader = new FileReader()
      reader.onload = (e) => {
        this.userInfo.avatar = e.target.result
        // 这里可以添加上传到服务器的逻辑
      }
      reader.readAsDataURL(file)
    },
    startEdit(field) {
      this.editing[field] = true
      this.editForm[field] = this.userInfo[field]
      this.$nextTick(() => {
        const input = this.$refs[`${field}Input`]
        if (input) input.focus()
      })
    },
    finishEdit(field) {
      if (this.editForm[field].trim()) {
        this.userInfo[field] = this.editForm[field]
      }
      this.editing[field] = false
    },
    changePassword() {
      if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
        this.passwordError = '请填写所有密码字段'
        return
      }
      
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.passwordError = '两次输入的新密码不一致'
        return
      }
      
      // 这里可以添加修改密码的逻辑
      this.passwordError = ''
      alert('密码修改成功！')
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    },
    viewPost(id) {
      // 查看文章详情
      console.log('查看文章:', id)
    },
    editPost(id) {
      // 编辑文章
      console.log('编辑文章:', id)
    },
    deletePost(id) {
      // 删除文章
      if (confirm('确定要删除这篇文章吗？')) {
        console.log('删除文章:', id)
      }
    },
    viewAllPosts() {
      // 查看所有文章
      this.$router.push('/posts')
    },
    handleSearch() {
      this.currentPage = 1 // 搜索时重置页码
    },
    changePage(page) {
      this.currentPage = page
    },
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  min-height: 100vh;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.profile-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;

  .avatar-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
    }

    .avatar-wrapper {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      position: relative;
      cursor: pointer;
      border: 4px solid #fff;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .user-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }

      .upload-hint {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8));
        color: white;
        padding: 4px;
        font-size: 12px;
        opacity: 0;
        transition: opacity 0.2s;
        border-radius: 0 0 60px 60px;
      }

      &:hover .upload-hint {
        opacity: 1;
      }
    }

    .username {
      margin: 15px 0 10px;
      font-size: 20px;
      color: #2c3e50;
    }

    .user-bio {
      color: #666;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .user-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    .stat-item {
      text-align: center;
      padding: 15px 10px;
      border-radius: 8px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(52, 152, 219, 0.1);
        transform: translateY(-2px);
      }

      .stat-value {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: #3498db;
      }

      .stat-label {
        font-size: 13px;
        color: #666;
      }
    }
  }

  .basic-info {
    margin-top: 20px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      color: #666;
      font-size: 14px;

      .icon {
        margin-right: 10px;
      }
    }
  }
}

.content-area {
  .tabs-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    .tab-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      color: #666;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: #3498db;
        transition: all 0.3s ease;
      }

      &:hover::after,
      &.active::after {
        left: 0;
        width: 100%;
      }

      &.active {
        background: linear-gradient(135deg, #3498db22, #3498db11);
      }

      .tab-icon {
        font-size: 18px;
      }
    }
  }

  .section-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        color: #2c3e50;
        font-size: 18px;
      }

      .new-post-btn {
        padding: 8px 16px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
          background: #2980b9;
        }
      }
    }
  }

  .post-list {
    .post-item {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid #eee;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      border: 1px solid #eee;
      transition: all 0.3s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        transform: translateX(5px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      }

      .post-main {
        flex: 1;

        .post-title {
          font-size: 16px;
          color: #2c3e50;
          margin-bottom: 8px;
          transition: color 0.3s ease;
          
          &:hover {
            color: #3498db;
          }
        }

        .post-excerpt {
          color: #666;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .post-meta {
          color: #999;
          font-size: 12px;

          span {
            margin-right: 15px;
          }
        }
      }

      .post-actions {
        display: flex;
        gap: 10px;
        align-items: center;

        button {
          padding: 6px 12px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: 13px;
          background: #f8f9fa;
          color: #666;
          transition: all 0.3s ease;

          &:hover {
            background: #e9ecef;
          }

          &.delete {
            color: #dc3545;
            &:hover {
              background: #ffebee;
            }
          }

          &.view {
            background: #3498db11;
            color: #3498db;
            
            &:hover {
              background: #3498db;
              color: white;
            }
          }
          
          &.edit {
            background: #2ecc7111;
            color: #2ecc71;
            
            &:hover {
              background: #2ecc71;
              color: white;
            }
          }
          
          &.delete {
            background: #e74c3c11;
            color: #e74c3c;
            
            &:hover {
              background: #e74c3c;
              color: white;
            }
          }
        }
      }
    }
  }

  .settings-form, .security-form {
    .form-group {
      margin-bottom: 20px;

      label {
        display: block;
        margin-bottom: 8px;
        color: #2c3e50;
        font-size: 14px;
      }

      input, textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s ease;

        &:hover {
          border-color: #95a5a6;
        }
        
        &:focus {
          border-color: #3498db;
          box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
      }

      textarea {
        resize: vertical;
      }
    }

    .save-btn {
      width: 100%;
      padding: 10px;
      background: linear-gradient(135deg, #3498db, #2980b9);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }

  .section-card {
    .section-header {
      .header-actions {
        display: flex;
        gap: 15px;
        align-items: center;

        .search-box {
          input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            width: 200px;
            font-size: 14px;

            &:focus {
              outline: none;
              border-color: #3498db;
            }
          }
        }

        .filter-select {
          padding: 8px 12px;
          border: 1px solid #ddd;
          border-radius: 6px;
          font-size: 14px;
          cursor: pointer;

          &:focus {
            outline: none;
            border-color: #3498db;
          }
        }
      }
    }

    .post-list {
      .post-item {
        position: relative;
        transition: transform 0.2s;

        &:hover {
          transform: translateX(5px);
        }

        .post-status {
          position: absolute;
          top: 20px;
          right: -5px;
          padding: 4px 8px;
          font-size: 12px;
          border-radius: 4px;
          
          &.published {
            background: #e1f5fe;
            color: #0288d1;
          }
          
          &.draft {
            background: #fff3e0;
            color: #ff9800;
          }
        }
      }
    }

  }

  .analytics {
    .chart-container {
      margin-top: 20px;
      height: 200px;
      
      .chart-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        
        .chart-bars {
          flex: 1;
          display: flex;
          align-items: flex-end;
          gap: 8px;
          padding-bottom: 20px;
          
          .chart-bar {
            flex: 1;
            background: linear-gradient(to top, #3498db, #85d6ff);
            border-radius: 4px 4px 0 0;
            transition: height 0.3s;
            
            &:hover {
              background: linear-gradient(to top, #2980b9, #3498db);
            }
          }
        }
        
        .chart-labels {
          display: flex;
          justify-content: space-between;
          padding: 0 5px;
          
          span {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
  }

  .notification-settings {
    color: var(--text-primary);

    .setting-group {
      h4 {
        margin-bottom: 20px;
      }
    }

    .setting-item {
      margin-bottom: 20px;

      .switch-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }

      .setting-desc {
        font-size: 13px;
        color: #666;
        margin-left: 2px;
      }

      .switch {
        position: relative;
        width: 40px;
        height: 20px;

        input {
          display: none;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          transition: .4s;
          border-radius: 20px;

          &:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
          }
        }

        input:checked + .slider {
          background-color: #3498db;
        }

        input:checked + .slider:before {
          transform: translateX(20px);
        }
      }
    }
  }
}
</style> 